<template>
    <div class="moveInfo-root b" ref="moveInfoDom"
        :style="'top:' + cssData.y + 'px;left:' + cssData.x + 'px;width:' + cssData.width + 'px;height:' + cssData.height + 'px;'"
        @mouseenter="box_MouseenterEvent" @mouseleave="box_MouseleaveEvent">
        <div v-if="state == 3" class="emp">
            <span>{{ title }}</span>
        </div>
        <div v-else class="content">
            <div class="icon"
                :style="'top:' + cssData.iconY + 'px;left:' + cssData.iconX + 'px;width:' + cssData.iconWidth + 'px;height:' + cssData.iconHeight + 'px;'">
                <img src="@/static/icon/nail.svg" v-if="infoState == 0" />
                <img src="@/static/icon/emp_1.svg" v-else @click="info_ClickEvent" />
            </div>
            <div class="text">{{ curData.name }}</div>
            <div class="category">
                <div v-for="(item, index) in curData.categoryArr" :key="index">{{ item }}</div>
            </div>
        </div>
    </div>
    <!-- 遮蔽的盒子(＠￣ー￣＠) -->
    <div class="backBox"
        :style="'top:' + infoCssData.top + 'px;left:' + infoCssData.left + 'px;width:' + infoCssData.width + '%;height:' + infoCssData.height + '%;transition-duration:' + infoCssData.time + 's;'">
    </div>
</template>

<script setup>
import { useUserStores } from '@/stores/index.js'
import { onMounted } from 'vue';

const userStores = useUserStores();

onMounted(() => {
    infoState.value = userStores.config.novelState;
    if (infoState.value == 1) {
        createShaderBox();
    }
})


const curData = ref({});
const state = ref(0);//[-1:等待倒计时回原位,0:待在原位,1:位移中,2:位移完成,3:鼠标在里面]
const title = ref('快拿开哦(￢ω￢)');
const cssData = ref({
    x: 10,
    y: 130,
    width: 40,
    height: 40,
    iconX: 5,
    iconY: 5,
    iconWidth: 30,
    iconHeight: 30,
});
let timeout = null;
let timer = null;
let titleIndex = 3;

//#region 生气了
const infoState = ref(0);
const infoCssData = ref({
    width: 0,
    height: 0,
    left: 0,
    top: 0,
    time: 0,
});
const moveInfoClickCount = ref(10);
const moveInfoDom = ref();
const info_ClickEvent = () => {
    if (moveInfoClickCount.value <= 0) {
        infoState.value = 0;
        moveInfoClickCount.value = 10;
        userStores.config.novelState = 0;
        remShaderBox();
    }
    moveInfoClickCount.value -= 2;
}
const createShaderBox = () => {
    //获取当前的位置
    const rect = moveInfoDom.value.getBoundingClientRect();
    infoCssData.value = {
        width: 0,
        height: 0,
        left: rect.x,
        top: rect.y,
        time: 0,
    };
    setTimeout(() => {
        infoCssData.value = {
            width: 100,
            height: 100,
            left: 0,
            top: 0,
            time: 0.6,
        };
    }, 200);
}
const remShaderBox = () => {
    const rect = moveInfoDom.value.getBoundingClientRect();
    infoCssData.value = {
        width: 0,
        height: 0,
        left: rect.x,
        top: rect.y,
        time: 0.6,
    };
}
//#endregion

//#region 移入移出
const box_MouseenterEvent = () => {
    if (state.value == 2 || state.value == -1) {
        state.value = 3;
        timer = setInterval(() => {
            if (titleIndex < 0) {
                clearInterval(timer);
                titleIndex = 3;
                infoState.value = 1;
                userStores.config.novelState = 1;
                createShaderBox();
                setTimeout(() => {
                    reset(true);
                }, 300);
            } else if (titleIndex < 3) {
                let text = ''
                for (let i = 0; i < 3 - titleIndex; i++) {
                    text += 'l';
                }
                title.value = '快拿开哦(' + text + '￢ω￢)';
            } else {
                title.value = '快拿开哦(￢ω￢)';
            }
            titleIndex--;
        }, 1000)
    }
}

const box_MouseleaveEvent = () => {
    if (state.value == 3) {
        reset();
    }
    if (timer) {
        clearInterval(timer);
        titleIndex = 3;
    }
}
//#endregion

//#region 移动
const move = (x, y, data) => {
    if (infoState.value == 1) return;
    state.value == 1;
    cssData.value.x = x;
    cssData.value.y = y;
    cssData.value.width = 200;
    cssData.value.height = 100;
    cssData.value.iconX = 190;
    cssData.value.iconY = -9;
    cssData.value.iconWidth = 10;
    cssData.value.iconHeight = 10;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
        state.value == 2;
    }, 500);
    curData.value = data;
    curData.value.categoryArr = data.category.split(',');
}

const reset = (is = false) => {
    if (timeout) clearTimeout(timeout);
    state.value = -1;
    timeout = setTimeout(() => {
        if (is) {
            cssData.value = {
                x: 10,
                y: 130,
                width: 40,
                height: 40,
                iconX: 5,
                iconY: 5,
                iconWidth: 30,
                iconHeight: 30,
            };
            state.value = 0;
            curData.value = {};
        } else if (state.value == -1) {
            cssData.value = {
                x: 10,
                y: 130,
                width: 40,
                height: 40,
                iconX: 5,
                iconY: 5,
                iconWidth: 30,
                iconHeight: 30,
            };
            state.value = 0;
            curData.value = {};
        }
    }, is ? 100 : 1000);
}
//#region 

defineExpose({
    move, reset,
})


</script>

<style lang="scss" scoped>
.backBox {
    position: fixed;
    background: red;
    z-index: 999;
    background-image: url('$/images/01.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.moveInfo-root {
    position: fixed;
    transition-duration: 0.3s;
    border-radius: 7px;
    overflow: hidden;
    padding: 5px;
    font-weight: 900;
    font-size: 17px;
    z-index: 9996;

    .content {
        position: relative;

        .category {
            color: #409eff;
            display: flex;
            flex-wrap: wrap;
            margin-top: 2px;

            >div {
                padding: 0 5px;
                background: white;
                border-radius: 5px;
                margin: 0 5px 5px 0;
            }
        }

        .text {
            color: white;
        }

        .icon {
            user-select: none;
            position: absolute;

            >img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
            }
        }
    }

    .emp {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        color: white;
    }

}
</style>